<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.d1{
				width: 300px;
				height: 500px;
				position: absolute;
				top: 45%;
				left: 50%;
				/*使div以自身中心居中显示*/
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				background-color: aqua;
				border: 1px solid red;
			}
			.d2{
				height: 25px;
				border-bottom: 1px solid red;
				text-align: right;	
			}
			.d3{
				height: 100px;
				background-color: orange;
				border-bottom: 1px solid red;
			}
			.p1{
				width: 297px;
				height: 100px;
				margin: 0;
				background-color: orange;
				font-size: 60px;
				text-align: right;
				border: 1px solid red;
				margin-bottom: 30px;
			}
			button{
				width: 60px;
				height: 50px;
				margin: 7.5px;
				margin-top: 7px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d2">网页简易计算器</div>
			<input type="text" class="p1" value="0" />
			<button>C</button>
			<button>%</button>
			<button>÷</button>
			<button>X</button><br/>
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>-</button><br/>
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>+</button><br/>
			<button>1</button>
			<button>2</button>
			<button>3</button>			
			<button style="width: 135px;">0</button>
			<button>.</button>
			<button style="height: 110px;margin-top: -55px;">=</button><br/>
		</div>
		<script type="text/javascript">
			$(function(){
				
			})
		</script>
	</body>
</html>
